// Skeleton overrides
// -------------------------

html {
  position: relative;
  min-height: 100%;
}

body {
  .font-source-sans();
  font-size: 16px;
  color: @font-color;
  -webkit-font-smoothing: antialiased;

  .container {
    max-width: 1020px;
  }
}

.no-subscribe-section {
  margin-bottom: 51px;
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  border: 0 none;
  padding: 1px 14px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  border-radius: 3px;
  background-color: @green;
  background-image: linear-gradient(to bottom, #29af65, #20a659);
  box-shadow: inset 0 -1px 0 #177942;

  &:hover {
    background-image: linear-gradient(to bottom, #16a257, #0c8d41);
    box-shadow: inset 0 -1px 0 #096830;
  }

  &:active {
    background-image: linear-gradient(to bottom, #0c803c, #149651);
    box-shadow: inset 0 1px 0 #085e2c;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
  }
}

.text-center {
  text-align: center;
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border-radius: 3px;
  letter-spacing: 0;
  font-weight: 600;
  text-transform: none;
  font-size: 13px;
  color: @blue;
  border-color: #bae2cc;
  height: 36px;
  line-height: 35px;
  padding: 0 13px;
  margin: 0;

  &:hover,
  &:active,
  &:focus {
    color: @blue;
    border-color: lighten(@blue, 40%);
  }

  &:hover {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .15), rgba(189, 230, 207, .15));
  }

  &:active {
    background: #e8f8ee;
  }
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  .font-source-sans();
  border-radius: 3px;
  border-color: #ced2d6;
  box-shadow: inset 1px 2px 0 0 rgba(242, 242, 242, .5);
  height: 36px;
  font-size: 14px;

  &:focus {
    border: 1px solid lighten(@blue, 30%);
    outline: 0;
  }
}

.column,
.columns {
  margin-bottom: 3rem;

  @media (min-width: 550px) {
    margin-bottom: 0;
  }
}

.button-large {
  font-size: 18px;
  line-height: 42px;
  height: 44px;
}

.button-dark {
  background: @navy-dark;
  border-color: @navy-dark;
  color: #fff;

  &:hover,
  &:active,
  &:focus {
    color: #fff;
    border-color: lighten(@navy-dark, 5%);
    background: lighten(@navy-dark, 5%);
  }
}

strong {
  font-weight: 600;
}

code {
  padding: 4px;
  color: @red;
  font-size: 14px;
  background-color: #fff2f2;
  border-radius: 3px;
  border: 0 none;
  margin: 0;
  font-family: @family-code;
}

a {
  color: @blue;
  text-decoration: none;

  &:hover {
    color: @blue - 30%;
  }

  code {
    color: @blue;
    background-color: #ebf7ff;
  }
}

h1, h2, h3, h4, h5, h6, .page-header-section-title {
  margin-top: 0;
  margin-bottom: 2rem;
  letter-spacing: 0;
  color: #262e33;
}

/* Fix for anchor link h tags being hidden by nav */
.page-content {
  h1, h2, h3, h4, h5, h6, .page-header-section-title, a[name] {
    @media (min-width: @navbar-collapse-point) {
      &::before {
        display: block;
        content: " ";
        margin-top: -@nav-header-height - 5;
        height: @nav-header-height + 5;
        visibility: hidden;
        pointer-events: none;
      }
    }
  }
}

h1, .page-header-section-title {
  font-size: 4rem;
  font-weight: 400;
}

h2 {
  font-size: 36px;
  font-weight: 400;
}

h3 {
  font-size: 26px;
}

h4 {
  font-size: 20px;
  font-weight: 600;
}

h5 {
  font-size: 18px;
  font-weight: 600;
}

h6 {
  .font-source-sans-sc();
  font-size: 14px;
}

figure {
  margin: 0;

  img {
    width: 100%;
    height: auto;
  }
}

ul {
  padding-left: 1.2em;
  list-style-position: outside;
}

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    margin: 0;
  }

  a {
    color: @gray-dark;
    text-decoration: none;
    display: block;
    font-size: 13px;
    transition: all .2s linear;

    &:hover {
      color: #2c3033;
    }

    &:active,
    &.active {
      color: @blue;
    }
  }
}

// In lieu of bootstrap
@media (min-width: 1101px) {
  .hidden-lg {
    display: none !important;
  }
}
